<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>SEG</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />		

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
		<link href="../../static/custom/dataTables.bootstrap.css" th:href="@{/static/custom/dataTables.bootstrap.css}" rel="stylesheet" />
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />

		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>
		<link href="../../static/custom/custom.css" th:href="@{/static/custom/custom.css}" rel="stylesheet" />

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>

			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<img width="60%"  height="60%" src="../../static/images/essalud_menu.jpg" th:src="@{/resources/static/images/essalud_menu.jpg}" alt="essaludIcon" />
					
				</div><!-- /.navbar-header -->
				

				<div class="navbar-buttons navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">	
						<a href="#" class="navbar-brand">
							<small>
								(Nombre o logo de la aplicaci&oacute;n)
							</small>
						</a><!-- /.brand -->	
						<li class="light-blue" sec:authorize="!hasRole('ROLE_ANONYMOUS')">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="../../static/images/business_user.png" th:src="@{/resources/static/images/business_user.png}" alt="Foto" />
								<span class="user-info">
									<small>Bienvenido,</small>
									<span sec:authentication="name">Ruben</span>
								</span>
								<i class="ace-icon fa fa-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="#" th:href="@{/logout}">
										<i class="ace-icon fa fa-power-off"></i>
										Cerrar Sesi&oacute;n
									</a>
								</li>
							</ul>
						</li>
						<li class="light-blue" th:classappend="${loginError} ? 'open'" sec:authorize="hasRole('ROLE_ANONYMOUS')">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<i class="ace-icon fa fa-key fa-2x"></i>
								<small>Iniciar Sesi&oacute;n</small>								
								<i class="ace-icon fa fa-caret-down"></i>
							</a>

							<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
								<li class="dropdown-header">
									<i class="ace-icon fa fa-lock"></i>
									Ingrese sus credenciales
								</li>

								<li class="dropdown-content">
									<ul class="dropdown-menu dropdown-navbar">
										<li>
											<a href="#">
												<form action="#" th:action="@{/loginProcess}" method="post" id="formLogin">												
													<fieldset>														
														<label class="block clearfix"> 
														<span class="block input-icon input-icon-right"> 
															<input type="text" class="form-control" name="username" id="username" placeholder="Nombre de usuario" th:value="(${param.login_error} and ${session}) ? ${session[__${lastUsernameKey}__]} : ''"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
														</label> 
														<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control"	name="password" id="password" placeholder="Contrase&ntilde;a" /> 
															<i class="ace-icon fa fa-lock"></i>
														</span>
														</label>
														<span class="text-danger" 
															 th:with="lastUsernameKey=${T(org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter).SPRING_SECURITY_LAST_USERNAME_KEY},
										              				  lastExceptionKey=${T(org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter).SPRING_SECURITY_LAST_EXCEPTION_KEY}"> 
															<span>
																<label id="txtValidacion" th:text="${loginError} and ${session[__${lastExceptionKey}__]} ? ${session[__${lastExceptionKey}__].message} : ''"><strong>Contraseña invalida</strong></label>
															</span>
														</span>
														<div class="space"></div>
	
														<div class="clearfix">
															<button id="botonLogin" type="button" class="pull-right btn btn-sm btn-primary">
																<i class="fa fa-key"></i> Ingresar
															</button>
														</div>
														<div class="space-4"></div>
													</fieldset>
												</form>
											</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>						
					</ul><!-- /.ace-nav -->
				</div><!-- /.navbar-header -->
			</div><!-- /.container -->
		</div>

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
					</script>

					<input id="opcionMenu" type="hidden" th:value="${opcionMenu}"/>
					<ul class="nav nav-list">					
						
						<li id="MProveedores" sec:authorize="isFullyAuthenticated()">
							<a href="#" >
								<i class="menu-icon fa fa-briefcase"></i>
								<span class="menu-text"> Proveedores</span>
							</a>

						</li>
						<li id="MCotizaciones" sec:authorize="isFullyAuthenticated()">
							<a href="#">
								<i class="menu-icon fa fa-gavel"></i>
								<span class="menu-text"> Cotizaciones</span>
							</a>
						</li>
						<li id="MUsuarios" sec:authorize="hasAnyRole('ROLE_ADMIN')">
							<a href='#'  th:href="@{/mantenerUsuarios}">
								<i class="menu-icon fa fa-user"></i>
								<span class="menu-text"> Usuarios</span>
							</a>
						</li>
						<li sec:authorize="hasAnyRole('ROLE_ADMIN')">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-gear"></i>
								<span class="menu-text"> Opcion 4  </span>
								<b class="arrow menu-icon fa fa-angle-down"></b>
							</a>
							<ul class="submenu">
								<li >
									<a href='#'>
										<i class="menu-icon fa fa-angle-double-right"></i>
										Opcion 4-1
									</a>
								</li>
								<li>
									<a href='#'>
										<i class="menu-icon fa fa-angle-double-right"></i>
										Opcion 4-2
									</a>
								</li>								
							</ul>
						</li>
						<li sec:authorize="hasAnyRole('ROLE_ADMIN')">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-gear"></i>
								<span class="menu-text"> Opcion 5  </span>
								<b class="arrow menu-icon fa fa-angle-down"></b>
							</a>
							<ul class="submenu">
								<li >
									<a href='#'>
										<i class="menu-icon fa fa-angle-double-right"></i>
										Opcion 5-1
									</a>
								</li>
								<li>
									<a href='#'>
										<i class="menu-icon fa fa-angle-double-right"></i>
										Opcion 5-2
									</a>
								</li>								
							</ul>
						</li>

						<li sec:authorize="hasAnyRole('ROLE_ADMIN')">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-gear"></i>
								<span class="menu-text"> Opcion 6  </span>
								<b class="arrow menu-icon fa fa-angle-down"></b>
							</a>
							<ul class="submenu">
								<li >
									<a href='#'>
										<i class="menu-icon fa fa-angle-double-right"></i>
										Opcion 6-1
									</a>
								</li>
								<li>
									<a href='#'>
										<i class="menu-icon fa fa-angle-double-right"></i>
										Opcion 6-2
									</a>
								</li>								
							</ul>
						</li>

						<li>
							<a href="#" >
								<i class="menu-icon fa fa-gear"></i>
								<span class="menu-text"> Opcion 7  </span>
							</a>
						</li>
					</ul><!-- /.nav-list -->

					<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
						<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
					</div>

					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
					</script>
				</div>
				<div class="main-content" tiles:include="body">					
					CUERPO DE LA PAGINA (Modo est&aacute;tico)
				</div><!-- /.main-content -->				
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="menu-icon fa fa-angle-double-up menu-icon fa fa-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
		
		<script src="../../static/custom/typeahead-bs2.min.js" th:src="@{/static/custom/typeahead-bs2.min.js}"></script>

		<!-- page specific plugin scripts -->

		<!-- ace scripts -->

		<script src="../../static/custom/ace-elements.min.js" th:src="@{/static/custom/ace-elements.min.js}"></script>
		<script src="../../static/custom/ace.min.js" th:src="@{/static/custom/ace.min.js}"></script>

		<!-- inline scripts related to this page -->		
		<script type="text/javascript">
		// <![CDATA[     
			jQuery(function($) {		
				
				var opcion = $('#opcionMenu').val();
				switch (opcion)
				  {
				  case "Usuarios":
					$('#MUsuarios').addClass('active');
				    break;
				  }	
				
				$('.dropdown-menu').click(function(e) {
			        e.stopPropagation();
			    });
				
				$('#botonLogin').click(function(e) {
					if(!$('#username').val()){
						$('#txtValidacion').text("Ingrese un usuario");
					} else if (!$('#password').val()){
						$('#txtValidacion').text("Ingrese una contrase\u00f1a");
					} else {
						$('#formLogin').submit();
					}
			    });
				
			})
			// ]]>
		</script>	
	</body>
</html>
